<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Yoga</title>
<link href="https://fonts.font.im/css?family=Modern+Antiqua" rel="stylesheet">
<link href="https://fonts.font.im/css?family=Hanalei+Fill" rel="stylesheet">
<link href='http://cdn.repository.webfont.com/webfonts/nomal/142509/45837/5fdb3e9cf629d8b194215f45.css' rel='stylesheet' type='text/css'/>
<link href="https://fonts.font.im/css?family=Merriweather" rel="stylesheet">
<style>
    .top{
			width:auto;
			height: 290px;
		}
		.me{
			position: relative;
				left:40%;
		}
		.myName{
			position: relative;
			left:46%;
			font-family:'ljsh251595db6322cad';
		}
		.tag{
			font-size: 17px;
			position: absolute;
			left:40%;
			font-family: 'Modern Antiqua', cursive;
		}
	.button { /* 按钮美化 */
	width:180px; /* 宽度 */
	height: 50px; /* 高度 */
	border-width: 10px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background:rgba(229,229,229,1.00); /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family:"astloch"; /* 设置字体 */
	color: black; /* 字体颜色 */
	font-size: 20px;/* 字体 */
	display:inline-block;
	transform: translateX(-80%) translateY(-10%);
   
}
.button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background:rgba(198,198,198,1.00);
	}

	.p {
		font-family: 'Hanalei Fill', cursive;
		text-align: center;
		text-transform: uppercase;
		color:#444444;
		user-select: none;		
	}
	
	.tel{
			position: relative;
			left: 40%;
		}
		.email{
			position: relative;
			left: 37%
		}
	
		.huojian{
			margin-left: 15%;
			margin-right: 20%;
		}
	.bottom{
			width: auto;
			height: 80px;
		    font-family;
		}
	 .box {
            margin: 10px;
            column-count: 4;
            column-gap: 10px;
	}
        .item img{
            width: 100%;
            height:100%;
				cursor: pointer;
			filter:grayscale(0%);
		-webkit-filter:grayscale(0%);
		-moz-filter:grayscale(0%);
		-ms-filter:grayscale(0%);
		-o-filter:grayscale(0%);
		 
        }
	.item:hover {
		filter:grayscale(100%);
		-webkit-filter:grayscale(100%);
		-moz-filter:grayscale(100%);
		-ms-filter:grayscale(100%);
		-o-filter:grayscale(100%);
	}
	.back{
		background-color:aliceblue;
		width: 100px;
		font-family: 'Merriweather', serif;
		border-width: 10px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	color: black; /* 字体颜色 */
	font-size: 20px;/* 字体 */
	}
	.back:hover { /* 鼠标移入按钮范围时改变颜色 */
	background-color: lightcyan;
	}

		
	
	
	</style>
</head>

<body>
	<a href="http://raven0823111.gitee.io/room603"><div class="back">back to room603</div></a>
	<div class="top">
		<img class="me" src="image/znjtx.jpg" width="190" height="160" alt=""/>
		<h2 class="myName">张宁静</h2><p class="tag">web design by Dreamweaver</p></div>
		<hr align="center" width="80%" color="rgba(100,100,100,1.00)"size="1">
	<div style="margin-left: 30%;margin-right: 0%;">
		<a href="index.html"><div class="button"><p class="p">Home</p></div></a>
		<a href="Album.html"><div class="button"><p class="p">Album</p></div></a>
		<a href="Brief.html"><div class="button"><p class="p">Brief</p></div></a>
		<a href="Designer.html"><div class="button"><p class="p">Designer</p></div></a>
	</div>
	<div style="margin-right:10%;margin-left: 10%;">
	<div class="box">
    <div class="item">
        <img  src="image/IMG_7620.JPG" alt="" />
    </div>
    <div class="item">
         <img  src="image/IMG_7619.JPG" alt="" />
    </div>
    <div class="item">
		<img  src="image/IMG_7605.JPG" alt="" />    
    </div>
    <div class="item">
		<img  src="image/IMG_7618.JPG" alt="" />
    </div>
    <div class="item"> 
		<img  src="image/IMG_7602.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7610.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7608.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7607.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7604.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7621.JPG" alt="" />
    </div>
    <div class="item">
        <img  src="image/IMG_7617.JPG" alt="" />
    </div>
</div>
	</div>
<div class="bottom"><img class="huojian" src="image/IMG_7603.GIF" width="800" height="300" alt=""/>
<p class="tel">tel:19907148507</p><p class="email">email:r1245110373@163.com</p></div>
</body>
</html>

